<template>
	<view class="content">
		<view class="header">
			<view :style="{height: systemBarHeight + 'px'}">
			</view>
			<view class="navbar">
				<text>考 试</text>
			</view>
		</view>
		<view class="date">
			<view class="date_tit">
				<text>选择时间</text>
			</view>
			<view class="select_date">
				<picker mode="date" @change="datechange">
					<view class="date1">
						<text>{{date ||'请选择考试时间'}}</text>
						<image src="/static/xy/ck1.png" mode=""></image>
					</view>
				</picker>
			</view>
		</view>

		<view class="km">
			<view class="km_tit">
				<text>选择科目</text>
			</view>
			<view class="km_type">
				<view :class="typevalue==index?'type_item1':'type_item'" class="type_item"
					v-for="(item,index) in typeList" :key="index" @click="kmchange(index)">
					<text>{{item.name}}</text>
					<image src="/static/jl/dui.png" mode="" v-if="typevalue==index"></image>
				</view>
			</view>
		</view>

		<view class="xy">
			<view class="xy_tit">
				<view class="tit1">
					<text>选择学员</text>
				</view>
				<!-- 	<view class="tit2">
					<text>去修改</text>
					<image src="" mode=""></image>
				</view> -->
			</view>

			<view class="select_xy" @click="stusubmit()">
				<text>请选择学员</text>
				<image src="/static/xy/ck1.png" mode=""></image>
			</view>

			<view class="xylist">
				<view class="xy_item" v-for="(item,index) in xyList" :key="index">
					<view class="xy_item_lf">
						<text class="xytit1">小明</text>
						<text class="xytit2">15012345678</text>
					</view>

					<view class="xy_item_rg">
						<view :class="item.starts==false?'xy_type1':'xy_type'" class="xy_type" @click="buhege(item)">
							<text>不合格</text>
							<image v-if="item.starts==false" src="/static/jl/dui.png" mode=""></image>
						</view>
						<view :class="item.starts==true?'xy_type1':'xy_type'" class="xy_type" @click="hege(item)">
							<text>合格</text>
							<image v-if="item.starts==true" src="/static/jl/dui.png" mode=""></image>
						</view>

					</view>
				</view>
			</view>
			
			<view class="cifrom">
				<text>提 交</text>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: 'exam',
		data() {
			return {
				systemBarHeight: 0,
				date: '',
				typevalue: 0,
				typeList: [{
						name: '科目二'
					},
					{
						name: '科目三'
					}
				],
				xyList: [{
						name: '小明',
						starts: false,
					},

					{
						name: '小明',
						starts: true,
					},

					{
						name: '小明',
						starts: false,
					}
				]
			}
		},
		mounted() {
			/* 手机顶部高度 */
			this.getSysteminfo()
		},
		methods: {
			/* 手机顶部高度 */
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			datechange(e) {
				this.date = e.detail.value
			},
			kmchange(index) {
				this.typevalue = index
			},
			buhege(item){
				item.starts=false
			},
			hege(item) {
				item.starts=true
			},
			stusubmit(){
				uni.navigateTo({
					url:'/pagesA/select_stu'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 750rpx;
		height: 1624rpx;
		background: #F5F5F5;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.header {
		background: #FFFFFF;
	}

	.navbar {
		height: 88rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 34rpx;
		color: #43484D;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.date {
		width: 93%;
		margin: 32rpx auto 0;

		height: 156rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.date_tit {
			width: 90%;
			padding-top: 24rpx;
			margin: auto;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #43484D;
		}

		.select_date {
			width: 90%;
			margin: 24rpx auto 0;

			.date1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 28rpx;

				>text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #BDC1C4;

				}

				>image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}

	.km {
		width: 93%;
		margin: 16rpx auto 0;
		height: 182rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.km_tit {
			width: 90%;
			padding-top: 24rpx;
			margin: auto;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #43484D;
		}

		.km_type {
			width: 90%;
			margin: 24rpx auto 0;
			display: flex;

			.type_item {
				width: 148rpx;
				height: 66rpx;
				background: #FCFBFE;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 2rpx solid #F6F5F8;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 22rpx;

				>image {
					width: 28rpx;
					height: 28rpx;
					position: absolute;
					bottom: 0rpx;
					right: 0rpx;
				}

				>text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #43484D;
				}
			}

			.type_item1 {
				width: 148rpx;
				height: 66rpx;
				background: #ECFFF8;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 2rpx solid #AEF3D9;

				>text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #53DDA8;
				}

			}
		}
	}

	.xy {
		width: 93%;
padding-bottom: 24rpx;
		margin: 16rpx auto 0;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.xy_tit {
			width: 90%;
			padding-top: 24rpx;
			margin: auto;

			.tit1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #43484D;
			}
		}

		.select_xy {
			width: 90%;
			margin: 24rpx auto 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			>image {
				width: 24rpx;
				height: 24rpx;
			}

			>text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #BDC1C4;
			}
		}

		.xylist {
			width: 90%;
			margin: 24rpx auto 0;
			padding-top: 32rpx;
			padding-bottom: 1rpx;
			background: #FCFCFC;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.xy_item {
				width: 90%;
				margin: 0 auto 32rpx;
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 32rpx;

				.xy_item_lf {
					display: flex;
					align-items: center;

					.xytit1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: rgba(51, 51, 51, 0.7);
					}

					.xytit2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: rgba(51, 51, 51, 0.7);
						margin-left: 8rpx;
					}
				}

				.xy_item_rg {
					display: flex;

					.xy_type {
						position: relative;
						width: 112rpx;
						height: 56rpx;
						background: #FCFBFE;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						border: 2rpx solid #F6F5F8;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-left: 16rpx;

						>text {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #43484D;
						}

						>image {
							width: 28rpx;
							position: absolute;
							bottom: 0rpx;
							right: 0rpx;
							height: 28rpx;
						}
					}
					.xy_type1{
						width: 112rpx;
						height: 56rpx;
						background: #ECFFF8;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						border: 2rpx solid #AEF3D9;
						
						>text {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #53DDA8; 
						}
					}
				}
			}
		}
	}
	.cifrom{
		width: 92%;
		height: 80rpx;
		background: linear-gradient( 90deg, #14DFA6 0%, #00C18A 100%);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.15);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: fixed;
		bottom: 230rpx;
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;align-items: center;justify-content: center;
	}
</style>